<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>polymap叠加点密度专题图</title>

    <script type="text/javascript" src="js/iConnector/polymaps.js "></script>
    <script type="text/javascript" src="../libs/SuperMap.Include.js"></script>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script type="text/javascript" src="js/iConnector/iConnectorPolymaps.js"></script>

    <style>
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
        svg {
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .compass .back {
            fill: #eee;
            fill-opacity: .8;
        }

        .compass .fore {
            stroke: #999;
            stroke-width: 1.5px;
        }

        .compass rect.back.fore {
            fill: #999;
            fill-opacity: .3;
            stroke: #eee;
            stroke-width: 1px;
            shape-rendering: crispEdges;
        }

        .compass .direction {
            fill: none;
        }

        .compass .chevron {
            fill: none;
            stroke: #999;
            stroke-width: 5px;
        }

        .compass .zoom .chevron {
            stroke-width: 4px;
        }

        .compass .active .chevron, .compass .chevron.active {
            stroke: #fff;
        }

        .compass.active .active .direction {
            fill: #999;
        }
    </style>
    <script type="text/javascript">
        var map,canvasTiles,host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-world/rest/maps/World";
        var po=org.polymaps;
        function init(){
            if(!document.createElement('canvas').getContext) {
                alert('您的浏览器不支持 canvas，请升级');
                return;
            }
            map = po.map()
                    .container(document.getElementById("map").appendChild(po.svg("svg")))
                    .center({lat:0, lon: 0})
                    .zoom(1)
                    .add(po.interact()) ;
            map.add(po.image()
                    .url(po.url("http://{S}tile.cloudmade.com"
                            + "/1a1b06b230af4efdbb989ea99e9841af"
                            + "/998/256/{Z}/{X}/{Y}.png")
                            .hosts(["a.", "b.", "c.", ""])));
            map.add(po.compass())  ;
        }
        //生成点密度专题图
        function addThemeDotDensity()
        {
            canvasTiles&&map.remove(canvasTiles);
            //创建制作点密度专题图服务类
            var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),
                    dotStyle = new SuperMap.REST.ServerStyle({
                        markerSize: 3,
                        markerSymbolID: 12
                    }),
                    themeDotDensity = new SuperMap.REST.ThemeDotDensity({
                        dotExpression: "Pop_1994",
                        value: 5000000,
                        style: dotStyle
                    }),
                    themeParameters = new SuperMap.REST.ThemeParameters({
                        themes: [themeDotDensity],
                        datasetNames: ["Countries"],
                        dataSourceNames: ["World"]
                    });
            //向iserver发送请求
            themeService.processAsync(themeParameters);
        }
        //生成专题图后将其叠加到 openstreetmap 地图上面
        function themeCompleted(themeEventArgs) {
            if(themeEventArgs.result.resourceInfo.id) {
                 canvasTiles =  SuperMap.Web.iConnector.PolyMaps.getLayer(url,{layersID:themeEventArgs.result.resourceInfo.id});
                map.add(canvasTiles);
            }
        }
        function themeFailed(serviceFailedEventArgs) {
            alert(serviceFailedEventArgs.error.errorMsg);
        }
           function removeTheme(){
               map.remove(canvasTiles);
           }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
    <input type="button" class="btn" value="创建点密度专题图" onclick="addThemeDotDensity()" />
    <input type="button" class="btn" value="移除点密度专题图" onclick="removeTheme()" />
</div>
<div id="map"></div>
</body>
</html>